<template>
  <div class="flex1 flex-column gap5 bg-gray-1 br10 box">
    <div class="bold mgb20">代理情况</div>
    <div class="flex-row-center-between">
      <div class="flex-column gap10">
        <div class="flex-row-center-between gap30">
          <span class="grey-text fs14">代理总数</span>
          <div @click="toPageAgent(false)">
            <el-link>
              <span class="main-text fs18 bold">{{ props.data.agentCount }}</span>
            </el-link>
            <span class="grey-text mgl5 fs14">个</span>
          </div>
        </div>
        <div class="flex-row-center-between gap30">
          <span class="grey-text fs14">本月新增代理</span>
          <div @click="toPageAgent(true)">
            <el-link>
              <span class="main-text fs18 bold">{{ props.data.currentMonthAgentCount }}</span>
            </el-link>
            <span class="grey-text mgl5 fs14">个</span>
          </div>
        </div>
      </div>

      <el-divider direction="vertical" style="height: 50px" />

      <div class="flex-column gap10">
        <div class="flex">
          <span class="grey-text fs14">环比增长</span>
          <div v-if="!props.data.agentSequentialGrowth?.startsWith('-')" class="down flex-row-center-left gap5">
            <el-icon><CaretTop /></el-icon>
            <span class="bold fs18">{{ props.data.agentSequentialGrowth?.replace('%', '') }}</span>
            <span class="fs14">%</span>
          </div>
          <div v-else class="up flex-row-center-left gap5">
            <el-icon><CaretBottom /></el-icon>
            <span class="bold fs18">{{ props.data.agentSequentialGrowth?.replace('%', '') }}</span>
            <span class="fs14">%</span>
          </div>
        </div>

        <div class="flex">
          <span class="grey-text fs14">同比增长</span>
          <div v-if="!props.data.agentYearOnYearGrowth?.startsWith('-')" class="down flex-row-center-left gap5">
            <el-icon><CaretTop /></el-icon>
            <span class="bold fs18">{{ props.data.agentYearOnYearGrowth?.replace('%', '') }}</span>
            <span class="fs14">%</span>
          </div>
          <div v-else class="up flex-row-center-left gap5">
            <el-icon><CaretBottom /></el-icon>
            <span class="down bold fs18">{{ props.data.agentYearOnYearGrowth?.replace('%', '') }}</span>
            <span class="fs14">%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { AgentData } from '../config'
  import router from '@/router'
  import dayjs from 'dayjs'

  interface IProps {
    title: string
    data: AgentData
  }

  const props = defineProps<IProps>()

  /**----------------------------methods----------------------------------------------------------------------- */

  const toPageAgent = (time: boolean) => {
    const [startTime, endTime] = getCurrentMonth()

    router.push({
      path: 'agent/list',
      query: time
        ? {
            startTime,
            endTime
          }
        : {}
    })
  }

  const getCurrentMonth = () => {
    const today = new Date()
    const currentMonth = today.getMonth()
    const currentYear = today.getFullYear()
    const startTime = new Date(currentYear, currentMonth, 1)
    const endTime = new Date(currentYear, currentMonth + 1, 0)
    return [dayjs(startTime).format('YYYY-MM-DD'), dayjs(endTime).format('YYYY-MM-DD')]
  }
</script>

<style scoped lang="less">
  .box {
    padding: 16px;
  }
  .up {
    color: #d92329;
  }
  .down {
    color: #119c59;
  }
</style>
